<template>
  <div class="container">
    <!-- 卡片视图区域 -->
    <el-card>
      <h3>班级列表</h3>
      专业：<el-select v-model="subjectsId" placeholder="请选择">
        <el-option v-for="item in subjects" :key="item._id" :label="item.name"
          :value="item._id">
        </el-option>
      </el-select>

      <el-table :data="classes" style="width: 100%" border>
        <el-table-column prop="_id" label="id" width="180"> </el-table-column>
        <!-- 班级名称 -->
        <el-table-column prop="name" label="班级名称" width="180">
          <!-- <template width="90" slot-scope="scope">
          <el-input
            type="text"
            v-model="changeStudent.name"
            v-show="scope.row.isEdit"
          />
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
        </template> -->
        </el-table-column>

        <!-- 学科 -->
        <el-table-column prop="subjectsId.name" label="学科" width="180">
          <!-- <template width="90" slot-scope="scope">
          <el-input
            type="text"
            v-model="changeStudent.age"
            v-show="scope.row.isEdit"
          />
          <span v-show="!scope.row.isEdit">{{ scope.row.age }}</span>
        </template> -->
        </el-table-column>

        <!-- 学员列表 -->
        <el-table-column prop="students" label="学员列表">
          <template width="90" slot-scope="scope">
            <select>
              <option value="" v-for="item in scope.row.students"
                :key="item._id">
                {{ item.name }}
              </option>
            </select>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column prop="gender" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete"
              @click="deleteClass(scope.row._id)">删除</el-button>

            <!-- <el-button size="mini" type="primary" v-show="!scope.row.isEdit"
              icon="el-icon-edit" @click="change(scope.row._id)">
              修改
            </el-button>

            <el-button size="mini" type="success" v-show="scope.row.isEdit"
              @click="upChange"><i class="el-icon-upload el-icon--right"></i>保存
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pages">
        <el-pagination @size-change="changeSize" @current-change="currentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("subject");
export default {
  data() {
    return {
      classes: [],
      subjectsId: "",
      queryInfo: { pageSize: 5, currentPage: 1 },
      total: 0,
    };
  },
  computed: {
    ...mapState(['subjects'])
  },
  methods: {
    // 获取专业
    ...mapActions(['getSubject']),
    //获取班级
    getClass() {
      this.$api.classApi
        .getClass({ params: this.queryInfo })
        .then(({ data }) => {
          // console.log(data.data.rows);
          this.total = data.data.total;
          this.classes = data.data.rows;
        });
    },
    // 通过专业Id获取班级
    getClassById(id) {
      this.$api.classApi
        .getClassById({
          params: { subjectsId: id, },
        })
        .then(({ data }) => {
          // console.log(data.data.rows);
          this.classes = data.data.rows;
        });
    },
    // 删除班级
    deleteClass(_id) {
      this.$api.classApi
        .deleteClass({ data: { _id } })
        .then(({ data }) => {
          this.$message.success(data);
          this.getClass();
        });
    },
    // 每一页展示数量
    changeSize(i) {
      this.queryInfo.pageSize = i;
    },
    // 页数
    currentChange(i) {
      this.queryInfo.currentPage = i;
    },
  },
  watch: {
    subjectsId(val) {
      this.getClassById(val);
    },
    queryInfo: {
      handler() {
        this.getClass();
      },
      deep: true
    }
  },
  created() {
    this.getClass();
    this.getSubject();
  },
};
</script>

<style lang='scss' scoped>
.container {
  width: 1100px;
}
</style>